<template>
  <view class="quality-ball-component">
    <view v-if="step == 1" class="circle circle-black" @tap.stop="handleTap"></view>
    <view v-if="step == 2" class="circle circle-yellow" @tap.stop="handleTap"></view>
    <view v-if="step == 3" class="circle circle-green" @tap.stop="handleTap"></view>
  </view>
</template>

<script>
  export default {
    data() {
      return {}
    },
    props: {
      step: {
        type: Number,
        default: 3,
      },
    },
    methods: {
      // 处理点击事件
      handleTap() {
        console.log('质量球')
        uni.navigateTo({
          url: '/pages/quality_ball/index',
        })
      },
    },
  }
</script>

<style lang="scss" scoped>
  .circle {
    position: fixed;
    right: 20rpx;
    bottom: 200rpx;
    z-index: 9999;
    width: 50rpx;
    height: 50rpx;
    background-color: transparent;
    border-radius: 50%;
    // display: none;
  }

  .circle-black {
    border: 5rpx solid black;
  }

  .circle-yellow {
    border: 5rpx solid yellow;
  }

  .circle-green {
    border: 5rpx solid green;
  }
</style>
